<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  </head>
  
  <body>
    <div class="easyui-layout" fit="true">
    	<!-- 表格上的toolbar工具条 -->
		<div id="easyui_toolbar" region="north" style="height:8%;">
        	<input type="button" id="slideBackSelectDateButton" value="选择时间" style="width:10%;float:right;margin-right:10px" onclick="slideBackSelectDate()"></input>
		</div>
    
    	<div id="backSelectdate">
        	<iframe src="calendar/backSelectdate.html" style="margin:4% 20%;height:90%;width:60%;position:absolute;" scrolling="no" frameborder="0"></iframe>
        	<input type="hidden" id="statisticalDate"/>
        </div>
		<div id="IndexViewsTotal" style="width:100%; height:90%;"></div>
	</div>
	<script type="text/javascript">
		function slideBackSelectDate(){
			var obj=$("#backSelectdate");
			if(obj.css("display")=="block"){
				obj.css("display","none");//隐藏时间选择块
				$("#IndexViewsTotal").css("display","block");
				getIndexViewsTotalData();
			}else{
				obj.css("display","block");//显示时间选择块
				$("#IndexViewsTotal").css("display","none");
			}
		}
		
		//从服务器拿数据
		function getIndexViewsTotalData(){
			var time=$("#statisticalDate").val();
			$.ajax({
				type:"POST",
				url:"backadmin/statistical.action",
				data:"op=indexViewsTotal&time="+time,
				dataType:"JSON",
				success:function(data){
					//2.拼接成横坐标和对应的值
					var abscissa= new Array(data.obj.abscissa.length);
					var abscissaValue= new Array(data.obj.abscissa.length);
					var arrayObj = new Array(data.obj.abscissa.length);
					for(var i=0;i<data.obj.abscissa.length;i++){
						abscissa[i]=data.obj.abscissa[i];
						abscissaValue[i]=data.obj.abscissaValue[i];
						//alert(data.obj.abscissa[i]+"值为:"+data.obj.abscissaValue[i]);
					}
					genIndexViewsTotal(abscissa,abscissaValue);//生成图表
				}
			})
		}
	
		//生成图表,
		function genIndexViewsTotal(abscissa,abscissaValue){
			//var imgsrc=new Array("images/tip/goodJob.JPG"); //图片路径数组 不需要该功能
			//var abscissa=['周一','周二','周三','周四','周五','周六','周日'];//横坐标 修改为动态的数据
			//var abscissaValue=[34,12,56,22,55,32,20];//横坐标对应的值
			var chart1=echarts.init(document.getElementById("IndexViewsTotal")); //显示区域的id
			option = {
			    title : {
			        text: '首页浏览次数统计' //标题
			    },
			    tooltip : {
			        trigger: 'axis',
			        padding: 10, 
			     	formatter:function(params,ticket,callback){
					//console.log(params[0].dataIndex);
					var imgindex=params[0].dataIndex;
					var txt=params[0].name+":"+params[0].value+"<br/>";
					//txt+="<img src="+imgsrc[imgindex]+" width=\"140\" >"; //添加对应的图片   不需要该功能
				  return txt;
			    }
			
			},
			  
			    toolbox: {
			        show : false,
			        feature : {
			            mark : {show: true},
			            dataView : {show: true, readOnly: false},
			            magicType : {show: true, type: ['line', 'bar']},
			            restore : {show: true},
			            saveAsImage : {show: true}
			        }
			    },
			    xAxis : [
			        {
			            type : 'category',
			            boundaryGap : false,
			            data : abscissa //横坐标
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value',
						scale: true,
			            axisLabel : {
			                formatter: '{value} 次' //纵坐标单位
			            }
			        }
			    ],
			
			    series : [
			        {
			            name:'浏览人次',
			            type:'line',
			            data:abscissaValue,
			            markPoint : {
			                data : [
			                    {type : 'max', name: '最大值'},
			                    {type : 'min', name: '最小值'}
			                ]
			            },
			            markLine : {
			                data : [
			                    {type : 'average', name: '平均值'}
			                ]
			            }
			        }
			    ]
			};
			chart1.setOption(option);
		}
	</script>
  </body>
</html>